<?php
if ( !defined('IN_SEC') ){exit();}
?>
<?php include template("admin_header");?>
				<div class="main-content">
					<div class="breadcrumbs" id="breadcrumbs">
						<script type="text/javascript">
							try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
						</script>

<?php include template("admin_breadcrumb");?>
					</div>

					<div class="page-content">
						<div class="page-header">
							<h1><?php echo $_G['admincp']['actname']; ?><small><i class="icon-double-angle-right"></i><?php echo $_G['admincp']['optname']; ?></small></h1>
						</div><!-- /.page-header -->

						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->

								<div class="row">
									<div class="col-xs-12">
										<div class="tabbable">
											<ul id="inbox-tabs" class="inbox-tabs nav nav-tabs padding-16 tab-size-bigger tab-space-1">
												<li class="li-new-mail pull-right">
													<a data-toggle="tab" href="#write" data-target="write" class="btn-new-mail">
														<span class="btn bt1n-small btn-purple no-border">
															<i class=" icon-envelope bigger-130"></i>
															<span class="bigger-110">新信息</span>
														</span>
													</a>
												</li><!-- ./li-new-mail -->

												<li class="active">
													<a data-toggle="tab" href="#inbox" data-target="inbox">
														<i class="blue icon-inbox bigger-130"></i>
														<span class="bigger-110">收信箱</span>
													</a>
												</li>

												<li>
													<a data-toggle="tab" href="#sent" data-target="sent">
														<i class="orange icon-location-arrow bigger-130 "></i>
														<span class="bigger-110">发信箱</span>
													</a>
												</li>

												<li class="hide">
													<a data-toggle="tab" href="#draft" data-target="draft">
														<i class="green icon-pencil bigger-130"></i>
														<span class="bigger-110">草稿箱</span>
													</a>
												</li>

												<li class="dropdown">
													<a data-toggle="dropdown" class="dropdown-toggle" href="#">
														<i class="pink icon-tags bigger-130"></i>

														<span class="bigger-110">
															Tags
															<i class="icon-caret-down"></i>
														</span>
													</a>

													<ul class="dropdown-menu dropdown-light-blue dropdown-125">
														<li>
															<a data-toggle="tab" href="#tag-1" data-target="tag-1">
																<span class="mail-tag badge badge-pink"></span>
																<span class="pink">Tag#1</span>
															</a>
														</li>

														<li>
															<a data-toggle="tab" href="#tag-family" data-target="tag-family">
																<span class="mail-tag badge badge-success"></span>
																<span class="green">Family</span>
															</a>
														</li>

														<li>
															<a data-toggle="tab" href="#tag-friends" data-target="tag-friends">
																<span class="mail-tag badge badge-info"></span>
																<span class="blue">Friends</span>
															</a>
														</li>

														<li>
															<a data-toggle="tab" href="#tag-work" data-target="tag-work">
																<span class="mail-tag badge badge-grey"></span>
																<span class="grey">Work</span>
															</a>
														</li>
													</ul>
												</li><!-- /.dropdown -->
											</ul>

											<div class="tab-content no-border no-padding">
												<div class="tab-pane in active">
													<div class="message-container">
														<div id="id-message-list-navbar" class="message-navbar align-center clearfix">
															<div class="message-bar">
																<div class="message-infobar" id="id-message-infobar">
																	<span class="blue bigger-150" id="message-list-name">收信箱</span>
																	<span class="grey bigger-110" id="unread-msg-count"></span>
																</div>

																<div class="message-toolbar hide">
																	<div class="inline position-relative align-left">
																		<a href="javascript:void(0);" class="btn-message btn btn-xs dropdown-toggle" data-toggle="dropdown">
																			<span class="bigger-110">操作</span>

																			<i class="icon-caret-down icon-on-right"></i>
																		</a>

																		<ul class="dropdown-menu dropdown-lighter dropdown-caret dropdown-125">
																			<li>
																				<a href="javascript:void(0);">
																					<i class="icon-mail-reply blue"></i>
																					&nbsp; 回复
																				</a>
																			</li>

																			<li>
																				<a href="javascript:void(0);">
																					<i class="icon-mail-forward green"></i>
																					&nbsp; 转发
																				</a>
																			</li>

																			<li>
																				<a href="javascript:void(0);">
																					<i class="icon-folder-open orange"></i>
																					&nbsp; Archive
																				</a>
																			</li>

																			<li class="divider"></li>

																			<li>
																				<a href="javascript:void(0);">
																					<i class="icon-eye-open blue"></i>
																					&nbsp; 标记为已读
																				</a>
																			</li>

																			<li>
																				<a href="javascript:void(0);">
																					<i class="icon-eye-close green"></i>
																					&nbsp; 标记为未读
																				</a>
																			</li>

																			<li>
																				<a href="#">
																					<i class="icon-flag-alt red"></i>
																					&nbsp; Flag
																				</a>
																			</li>

																			<li class="divider"></li>

																			<li>
																				<a href="#">
																					<i class="icon-trash red bigger-110"></i>
																					&nbsp; 删除
																				</a>
																			</li>
																		</ul>
																	</div>

																	<div class="inline position-relative align-left">
																		<a href="#" class="btn-message btn btn-xs dropdown-toggle" data-toggle="dropdown">
																			<i class="icon-folder-close-alt bigger-110"></i>
																			<span class="bigger-110">Move to</span>

																			<i class="icon-caret-down icon-on-right"></i>
																		</a>

																		<ul class="dropdown-menu dropdown-lighter dropdown-caret dropdown-125">
																			<li>
																				<a href="#">
																					<i class="icon-stop pink2"></i>
																					&nbsp; Tag#1
																				</a>
																			</li>

																			<li>
																				<a href="#">
																					<i class="icon-stop blue"></i>
																					&nbsp; Family
																				</a>
																			</li>

																			<li>
																				<a href="#">
																					<i class="icon-stop green"></i>
																					&nbsp; Friends
																				</a>
																			</li>

																			<li>
																				<a href="#">
																					<i class="icon-stop grey"></i>
																					&nbsp; Work
																				</a>
																			</li>
																		</ul>
																	</div>

																	<a href="#" class="btn btn-xs btn-message">
																		<i class="icon-trash bigger-125"></i>
																		<span class="bigger-110">Delete</span>
																	</a>
																</div>
															</div>

															<div>
																<div class="messagebar-item-left">
																	<label class="inline middle">
																		<input type="checkbox" id="id-toggle-all" class="ace" />
																		<span class="lbl"></span>
																	</label>

																	&nbsp;
																	<div class="inline position-relative">
																		<a href="#" data-toggle="dropdown" class="dropdown-toggle">
																			<i class="icon-caret-down bigger-125 middle"></i>
																		</a>

																		<ul class="dropdown-menu dropdown-lighter dropdown-100">
																			<li>
																				<a id="id-select-message-all" href="#">All</a>
																			</li>

																			<li>
																				<a id="id-select-message-none" href="#">None</a>
																			</li>

																			<li class="divider"></li>

																			<li>
																				<a id="id-select-message-unread" href="#">Unread</a>
																			</li>

																			<li>
																				<a id="id-select-message-read" href="#">Read</a>
																			</li>
																		</ul>
																	</div>
																</div>

																<div class="messagebar-item-right">
																	<div class="inline position-relative">
																		<a href="#" data-toggle="dropdown" class="dropdown-toggle">
																			排序 &nbsp;
																			<i class="icon-caret-down bigger-125"></i>
																		</a>

																		<ul class="dropdown-menu dropdown-lighter pull-right dropdown-100">
																			<li>
																				<a href="#">
																					<i class="icon-ok green"></i>按照时间
																				</a>
																			</li>

																			<li>
																				<a href="#">
																					<i class="icon-ok invisible"></i>来源
																				</a>
																			</li>

																			<li>
																				<a href="#">
																					<i class="icon-ok invisible"></i>标题
																				</a>
																			</li>
																		</ul>
																	</div>
																</div>

																<div class="nav-search minimized">
																	<form class="form-search">
																		<span class="input-icon">
																			<input type="text" autocomplete="off" class="input-small nav-search-input" placeholder="Search inbox ..." />
																			<i class="icon-search nav-search-icon"></i>
																		</span>
																	</form>
																</div>
															</div>
														</div>

														<div id="id-message-item-navbar" class="hide message-navbar align-center clearfix">
															<div class="message-bar">
																<div class="message-toolbar">
																	<div class="inline position-relative align-left">
																		<a href="#" class="btn-message btn btn-xs dropdown-toggle" data-toggle="dropdown">
																			<span class="bigger-110">Action</span>

																			<i class="icon-caret-down icon-on-right"></i>
																		</a>

																		<ul class="dropdown-menu dropdown-lighter dropdown-caret dropdown-125">
																			<li>
																				<a href="#">
																					<i class="icon-mail-reply blue"></i>
																					&nbsp; Reply
																				</a>
																			</li>

																			<li>
																				<a href="#">
																					<i class="icon-mail-forward green"></i>
																					&nbsp; Forward
																				</a>
																			</li>

																			<li>
																				<a href="#">
																					<i class="icon-folder-open orange"></i>
																					&nbsp; Archive
																				</a>
																			</li>

																			<li class="divider"></li>

																			<li>
																				<a href="#">
																					<i class="icon-eye-open blue"></i>
																					&nbsp; Mark as read
																				</a>
																			</li>

																			<li>
																				<a href="#">
																					<i class="icon-eye-close green"></i>
																					&nbsp; Mark unread
																				</a>
																			</li>

																			<li>
																				<a href="#">
																					<i class="icon-flag-alt red"></i>
																					&nbsp; Flag
																				</a>
																			</li>

																			<li class="divider"></li>

																			<li>
																				<a href="#">
																					<i class="icon-trash red bigger-110"></i>
																					&nbsp; Delete
																				</a>
																			</li>
																		</ul>
																	</div>

																	<div class="inline position-relative align-left">
																		<a href="#" class="btn-message btn btn-xs dropdown-toggle" data-toggle="dropdown">
																			<i class="icon-folder-close-alt bigger-110"></i>
																			<span class="bigger-110">Move to</span>

																			<i class="icon-caret-down icon-on-right"></i>
																		</a>

																		<ul class="dropdown-menu dropdown-lighter dropdown-caret dropdown-125">
																			<li>
																				<a href="#">
																					<i class="icon-stop pink2"></i>
																					&nbsp; Tag#1
																				</a>
																			</li>

																			<li>
																				<a href="#">
																					<i class="icon-stop blue"></i>
																					&nbsp; Family
																				</a>
																			</li>

																			<li>
																				<a href="#">
																					<i class="icon-stop green"></i>
																					&nbsp; Friends
																				</a>
																			</li>

																			<li>
																				<a href="#">
																					<i class="icon-stop grey"></i>
																					&nbsp; Work
																				</a>
																			</li>
																		</ul>
																	</div>

																	<a href="#" class="btn btn-xs btn-message">
																		<i class="icon-trash bigger-125"></i>
																		<span class="bigger-110">Delete</span>
																	</a>
																</div>
															</div>

															<div>
																<div class="messagebar-item-left">
																	<a href="#" class="btn-back-message-list">
																		<i class="icon-arrow-left blue bigger-110 middle"></i>
																		<b class="bigger-110 middle">返回</b>
																	</a>
																</div>

																<div class="messagebar-item-right">
																	<i class="icon-time bigger-110 orange middle"></i>
																	<span class="time grey"> <span class="message-date"></span> </span>
																</div>
															</div>
														</div>

														<div id="id-message-new-navbar" class="hide message-navbar align-center clearfix">
															<div class="message-bar">
																<div class="message-toolbar">
																	<a href="#" class="btn btn-xs btn-message">
																		<i class="icon-save bigger-125"></i>
																		<span class="bigger-110">保存草稿</span>
																	</a>

																	<a href="#" class="btn btn-xs btn-message">
																		<i class="icon-remove bigger-125"></i>
																		<span class="bigger-110">取消</span>
																	</a>
																</div>
															</div>

															<div class="message-item-bar">
																<div class="messagebar-item-left">
																	<a href="#" class="btn-back-message-list no-hover-underline">
																		<i class="icon-arrow-left blue bigger-110 middle"></i>
																		<b class="middle bigger-110">返回</b>
																	</a>
																</div>

																<div class="messagebar-item-right">
																	<span class="inline btn-send-message">
																		<button type="button" class="btn btn-sm btn-primary no-border btn-post-mail">
																			<span class="bigger-110">发送</span>

																			<i class="icon-arrow-right icon-on-right"></i>
																		</button>
																	</span>
																</div>
															</div>
														</div>

														<div class="message-list-container">
															<div class="message-list" id="message-list"></div>
														</div><!-- /.message-list-container -->

														<div class="message-footer clearfix">
															<div class="pull-left"> <span id="total-msg-count"></span> </div>

															<div class="pull-right">
																<div class="inline middle"> <span id="page-info"></span> </div>

																&nbsp; &nbsp;
																<ul class="pagination middle">
																	<li class="disabled">
																		<span>
																			<i class="icon-step-backward middle"></i>
																		</span>
																	</li>

																	<li class="disabled">
																		<span>
																			<i class="icon-caret-left bigger-140 middle"></i>
																		</span>
																	</li>

																	<li>
																		<span>
																			<input value="1" maxlength="3" type="text" />
																		</span>
																	</li>

																	<li>
																		<a href="#">
																			<i class="icon-caret-right bigger-140 middle"></i>
																		</a>
																	</li>

																	<li>
																		<a href="#">
																			<i class="icon-step-forward middle"></i>
																		</a>
																	</li>
																</ul>
															</div>
														</div>

														<div class="hide message-footer message-footer-style2 clearfix">
															<div class="pull-left"> </div>

															<div class="pull-right">
																<div class="inline middle"> </div>

																&nbsp; &nbsp;
																<ul class="pagination middle">
																	<li class="disabled">
																		<span>
																			<i class="icon-angle-left bigger-150"></i>
																		</span>
																	</li>

																	<li>
																		<a href="#">
																			<i class="icon-angle-right bigger-150"></i>
																		</a>
																	</li>
																</ul>
															</div>
														</div>
													</div><!-- /.message-container -->
												</div><!-- /.tab-pane -->
											</div><!-- /.tab-content -->
										</div><!-- /.tabbable -->
									</div><!-- /.col -->
								</div><!-- /.row -->

								<form id="id-message-form" action="?action=message&operation=index&act=post_mail" method="post" enctype="multipart/form-data" class="hide form-horizontal message-form col-xs-12">
									<div class="">
										<div class="form-group">
											<label class="col-sm-3 control-label no-padding-right" for="form-field-recipient">接收人：</label>

											<div class="col-sm-6 col-xs-12">
                                                	<select id="heivrids" name="heivrids[]" multiple style=" width:100%;">
<?php if(is_array($admins)){foreach($admins AS $k=>$v) { ?>
													<option value="<?php echo $v['id']; ?>" <?php echo in_array($v['username'], $sendto, true) ? "selected" : ''; ?>><?php echo heivrid($v); ?></option>
<?php }}?>
                                                    </select>
											</div>
										</div>

										<div class="hr hr-18 dotted"></div>

										<div class="form-group">
											<label class="col-sm-3 control-label no-padding-right" for="form-field-subject">标题：</label>

											<div class="col-sm-6 col-xs-12">
												<div class="input-icon block col-xs-12 no-padding">
													<input maxlength="100" type="text" class="col-xs-12" name="subject" id="form-field-subject" placeholder="标题" />
													<i class="icon-comment-alt"></i>
												</div>
											</div>
										</div>

										<div class="hr hr-18 dotted"></div>

										<div class="form-group">
											<label class="col-sm-3 control-label no-padding-right">
												<span class="inline space-24 hidden-480"></span>
												内容：
											</label>

											<div class="col-sm-9">
												<div class="wysiwyg-editor" name="detail"></div>
											</div>
										</div>

										<div class="hr hr-18 dotted"></div>

										<div class="form-group no-margin-bottom">
											<label class="col-sm-3 control-label no-padding-right">附件:</label>

											<div class="col-sm-9">
												<div id="form-attachments">
													<input type="file" name="attachment[]" />
												</div>
											</div>
										</div>

										<div class="align-right">
											<button id="id-add-attachment" type="button" class="btn btn-sm btn-danger">
												<i class="icon-paper-clip bigger-140"></i>添加附件
											</button>
										</div>

										<div class="space"></div>
									</div>
								</form>

								<div class="hide message-content" id="id-message-content"></div><!-- /.message-content -->

								<!-- PAGE CONTENT ENDS -->
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content -->
				</div>
<?php include template("admin_footer");?>
		<link rel="stylesheet" href="/static/ace/assets/css/select2.css" />
		<!-- page specific plugin scripts -->
		<script src="/static/ace/assets/js/select2.min.js"></script>

		<script src="/static/ace/assets/js/bootstrap-tag.min.js"></script>
		<script src="/static/ace/assets/js/jquery.hotkeys.min.js"></script>
		<script src="/static/ace/assets/js/bootstrap-wysiwyg.min.js"></script>
		<script src="/static/ace/assets/js/jquery-ui-1.10.3.custom.min.js"></script>
		<script src="/static/ace/assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="/static/ace/assets/js/jquery.slimscroll.min.js"></script>

							<script id="message-content-template" type="text/template">
									<div class="message-header clearfix">
										<div class="pull-left">
											<span class="blue bigger-125"> {message_title} </span>

											<div class="space-4"></div>

											<i class="icon-star orange2 mark-star"></i>

											&nbsp;
											<img class="middle" alt="{sender_avatar}" src="{sender_avatar}" width="32" />
											&nbsp;
											<a href="{sender_url}" target="_blank" class="sender">{sender_name}</a>

											&nbsp;
											<i class="icon-time bigger-110 orange middle"></i>
											<span class="time">{date}</span>
										</div>

										<div class="action-buttons pull-right">
											<a href="#">
												<i class="icon-reply green icon-only bigger-130"></i>
											</a>

											<a href="#">
												<i class="icon-mail-forward blue icon-only bigger-130"></i>
											</a>

											<a href="#">
												<i class="icon-trash red icon-only bigger-130"></i>
											</a>
										</div>
									</div>

									<div class="hr hr-double"></div>

									<div class="message-body">{message_detail}</div>

									<div class="hr hr-double"></div>

									<div class="message-attachment clearfix">
										<div class="attachment-title">
											<span class="blue bolder bigger-110">Attachments</span>
											&nbsp;
											<span class="grey">(2 files, 4.5 MB)</span>

											<div class="inline position-relative">
												<a href="#" data-toggle="dropdown" class="dropdown-toggle">
													&nbsp;
													<i class="icon-caret-down bigger-125 middle"></i>
												</a>

												<ul class="dropdown-menu dropdown-lighter">
													<li>
														<a href="#">打包成 .zip 下载</a>
													</li>

													<li>
														<a href="#">Display in slideshow</a>
													</li>
												</ul>
											</div>
										</div>

										&nbsp;
										<ul class="attachment-list pull-left list-unstyled">
											<li>
												<a href="#" class="attached-file inline">
													<i class="icon-file-alt bigger-110 middle"></i>
													<span class="attached-name middle">Document1.pdf</span>
												</a>

												<div class="action-buttons inline">
													<a href="#">
														<i class="icon-download-alt bigger-125 blue"></i>
													</a>

													<a href="#">
														<i class="icon-trash bigger-125 red"></i>
													</a>
												</div>
											</li>

											<li>
												<a href="#" class="attached-file inline">
													<i class="icon-film bigger-110 middle"></i>
													<span class="attached-name middle">Sample.mp4</span>
												</a>

												<div class="action-buttons inline">
													<a href="#">
														<i class="icon-download-alt bigger-125 blue"></i>
													</a>

													<a href="#">
														<i class="icon-trash bigger-125 red"></i>
													</a>
												</div>
											</li>
										</ul>

										<div class="attachment-images pull-right">
											<div class="vspace-sm-4"></div>

											<div>
												<img width="36" alt="image 4" src="/static/ace/assets/images/gallery/thumb-4.jpg" />
												<img width="36" alt="image 3" src="/static/ace/assets/images/gallery/thumb-3.jpg" />
												<img width="36" alt="image 2" src="/static/ace/assets/images/gallery/thumb-2.jpg" />
												<img width="36" alt="image 1" src="/static/ace/assets/images/gallery/thumb-1.jpg" />
											</div>
										</div>
									</div>
</script>


<script id="message-template" type="text/template">
																<div class="message-item message-{read_status}" mailid="{mailid}">
																	<label class="inline">
																		<input type="checkbox" class="ace" />
																		<span class="lbl"></span>
																	</label>

																	<i class="message-star icon-star orange2"></i>
																	<span class="sender" title="{sender}">{sender}</span>
																	<span class="time">{date}</span>

																	<span class="summary">
																		<span class="text" mailid="{mailid}">{title}</span>
																	</span>
																</div>
</script>

		<script type="text/javascript">

			var Inbox = {
				//displays a toolbar according to the number of selected messages
				display_bar : function (count) {
					if( count == 0 ) {
						$('#id-toggle-all').removeAttr('checked');
						$('#id-message-list-navbar .message-toolbar').addClass('hide');
						$('#id-message-list-navbar .message-infobar').removeClass('hide');
					}else {
						$('#id-message-list-navbar .message-infobar').addClass('hide');
						$('#id-message-list-navbar .message-toolbar').removeClass('hide');
					}
				},
				select_all : function() {
					var count = 0;
					$('.message-item input[type=checkbox]').each(function(){
						this.checked = true;
						$(this).closest('.message-item').addClass('selected');
						count++;
					});
					
					$('#id-toggle-all').get(0).checked = true;
					
					Inbox.display_bar(count);
				},
				select_none : function() {
					$('.message-item input[type=checkbox]').removeAttr('checked').closest('.message-item').removeClass('selected');
					$('#id-toggle-all').get(0).checked = false;
					Inbox.display_bar(0);
				},
				select_read : function() {
					$('.message-unread input[type=checkbox]').removeAttr('checked').closest('.message-item').removeClass('selected');
					
					var count = 0;
					$('.message-item:not(.message-unread) input[type=checkbox]').each(function(){
						this.checked = true;
						$(this).closest('.message-item').addClass('selected');
						count++;
					});
					Inbox.display_bar(count);
				},
				select_unread : function() {
					$('.message-item:not(.message-unread) input[type=checkbox]').removeAttr('checked').closest('.message-item').removeClass('selected');
					
					var count = 0;
					$('.message-unread input[type=checkbox]').each(function(){
						this.checked = true;
						$(this).closest('.message-item').addClass('selected');
						count++;
					});
					
					Inbox.display_bar(count);
				}
			}
		
			//show message list (back from writing mail or reading a message)
			Inbox.show_list = function(get) {
				$('.message-navbar').addClass('hide');
				$('#id-message-list-navbar').removeClass('hide');
		
				$('.message-footer').addClass('hide');
				$('.message-footer:not(.message-footer-style2)').removeClass('hide');
		
				$('.message-list').removeClass('hide').next().addClass('hide');
				D.Mail.loadmsgs(get);
				//hide the message item / new message window and go back to list
			}

			//新信息
			Inbox.show_form = function() {
				if($('.message-form').is(':visible')) return;
				if(!form_initialized) {
					initialize_form();
				}
	
				var message = $('.message-list');
				$('.message-container').append('<div class="message-loading-overlay"><i class="icon-spin icon-spinner orange2 bigger-160"></i></div>');
	
				message.next().addClass('hide');
					
				$('.message-container').find('.message-loading-overlay').remove();
					
				$('.message-list').addClass('hide');
				$('.message-footer').addClass('hide');
				$('.message-form').removeClass('hide').insertAfter('.message-list');
					
				$('.message-navbar').addClass('hide');
				$('#id-message-new-navbar').removeClass('hide');
	
				$('.message-form .wysiwyg-editor').empty();
				
				$('.message-form .ace-file-input').closest('.file-input-container:not(:first-child)').remove();
				$('.message-form input[type=file]').ace_file_input('reset_input');
					
				$('.message-form').get(0).reset();
			}

			var form_initialized = false;
			function initialize_form() {
				if( form_initialized ){
					return false;
				}
				form_initialized = true;
				//intialize wysiwyg editor
				$('.message-form .wysiwyg-editor').ace_wysiwyg({
					name : 'detail',
					toolbar : [
						'bold',
						'italic',
						'strikethrough',
						'underline',
						null,
						'justifyleft',
						'justifycenter',
						'justifyright',
						null,
						'createLink',
						'unlink',
						null,
						'undo',
						'redo'
					]
				}).prev().addClass('wysiwyg-style1').attr('name', 'detail');
		
				//file input
				$('.message-form input[type=file]').ace_file_input()
				//and the wrap it inside .span7 for better display, perhaps
				.closest('.ace-file-input').addClass('width-90 inline').wrap('<div class="row file-input-container"><div class="col-sm-7"></div></div>');
		
				//the button to add a new file input
				$('#id-add-attachment').on('click', function(){
					var file = $('<input type="file" name="attachment[]" />').appendTo('#form-attachments');
					file.ace_file_input();
					file.closest('.ace-file-input').addClass('width-90 inline').wrap('<div class="row file-input-container"><div class="col-sm-7"></div></div>')
					.parent(/*.span7*/).append('<div class="action-buttons pull-right col-xs-1">\
						<a href="#" data-action="delete" class="middle">\
							<i class="icon-trash red bigger-130 middle"></i>\
						</a>\
					</div>').find('a[data-action=delete]').on('click', function(e){
						//the button that removes the newly inserted file input
						e.preventDefault();			
						$(this).closest('.row').hide(300, function(){
							$(this).remove();
						});
					});
				});
			}
			var prevTab = 'inbox'
			jQuery(function($){
				//handling tabs and loading/displaying relevant messages and forms
				//not needed if using the alternative view, as described in docs
				$('#inbox-tabs a[data-toggle="tab"]').on('show.bs.tab', function (e) {
					var currentTab = $(e.target).data('target');
					if( currentTab == 'write' ) {
						Inbox.show_form();
					}else{
						var get = (currentTab == 'inbox') ? false : true;
						Inbox.show_list(get);
						if( prevTab == 'write' ){
//							Inbox.show_list();
						}
					}
					prevTab = currentTab;
				});

				//basic initializations
				$('.message-list .message-item input[type=checkbox]').removeAttr('checked');
				$('.message-list').delegate('.message-item input[type=checkbox]' , 'click', function() {
					$(this).closest('.message-item').toggleClass('selected');
					if( this.checked ){
						Inbox.display_bar(1);//display action toolbar when a message is selected
					} else {
						Inbox.display_bar($('.message-list input[type=checkbox]:checked').length);
						//determine number of selected messages and display/hide action toolbar accordingly
					}		
				});
				//check/uncheck all messages
				$('#id-toggle-all').removeAttr('checked').on('click', function(){
					if(this.checked) {
						Inbox.select_all();
					} else{
						Inbox.select_none();
					}
				});
				
				//select all
				$('#id-select-message-all').on('click', function(e) {
					e.preventDefault();
					Inbox.select_all();
				});
				
				//select none
				$('#id-select-message-none').on('click', function(e) {
					e.preventDefault();
					Inbox.select_none();
				});
				
				//select read
				$('#id-select-message-read').on('click', function(e) {
					e.preventDefault();
					Inbox.select_read();
				});
			
				//select unread
				$('#id-select-message-unread').on('click', function(e) {
					e.preventDefault();
					Inbox.select_unread();
				});

				//display first message in a new area
				// .message-item .text
				$(document).on('click', '#message-list .message-item .text', function(event) {
					D.Mail.read($(this));
					event.stopPropagation();
				});
				$(document).on('click', '#message-list .message-item', function() {
					D.Mail.read($(this), true);
					event.stopPropagation();
				});
			
				//back to message list
				$('.btn-back-message-list').on('click', function(e) {
					e.preventDefault();
					Inbox.show_list();
					$('#inbox-tabs a[data-target="inbox"]').tab('show'); 
				});
			
				//hide message list and display new message form
				/*
				$('.btn-new-mail').on('click', function(e){
					e.preventDefault();
					Inbox.show_form();
				});
				*/
			
			
				//turn the recipient field into a tag input field!
				/**	
				var tag_input = $('#form-field-recipient');
				if(! ( /msie\s*(8|7|6)/.test(navigator.userAgent.toLowerCase())) ) 
					tag_input.tag({placeholder:tag_input.attr('placeholder')});
			
			
				//and add form reset functionality
				$('.message-form button[type=reset]').on('click', function(){
					$('.message-form .message-body').empty();
					
					$('.message-form .ace-file-input:not(:first-child)').remove();
					$('.message-form input[type=file]').ace_file_input('reset_input');
					var val = tag_input.data('value');
					tag_input.parent().find('.tag').remove();
					$(val.split(',')).each(function(k,v){
						tag_input.before('<span class="tag">'+v+'<button class="close" type="button">&times;</button></span>');
					});
				});
				*/
			
			});

			D.Main = {
				init : function(){
<?php if($sendto){?>
					$('.btn-new-mail').click();
					Inbox.show_form();
					prevTab = 'write';
<?php } else { ?>
					D.Mail.loadmsgs();
<?php }?>
				}
			}
			D.Mail = {
				initialize : false,
				init : function(){
					$("#heivrids").select2({allowClear:true});
					$('.btn-post-mail').on('click', function(){
						var data = $('#id-message-form').serialize();
						data += '&detail=' + $('.wysiwyg-editor').html();
						D.loading.bootbox();
						D.ajax.postdata($('#id-message-form').attr('action'), data, function(json){
							bootbox.hideAll();
							if( json.type == 'alert' ){
								bootbox.alert(json.data);
							}else{
								bootbox.dialog({
									message: '操作成功',
									buttons : {
										success : {
											label : "确认",
											className : "btn-sm btn-primary",
											callback : function(){
												window.location.reload();
											}
										}
									}
								});
							}
						});
					});
				},
				loadmsgs : function(get){
					$('.message-container').append('<div class="message-loading-overlay"><i class="icon-spin icon-spinner orange2 bigger-160"></i></div>');
					$('.message-inline-open').removeClass('message-inline-open').find('.message-content').remove();
					var url = '?action=message&operation=index&act=';
					url += (get ? 'get_sents' : 'get_msgs');
					D.ajax.get(url, function(json){
						var html = '';
						$.each(json.data.msgs, function(i, n){
							var data = {
								title : n.title,
								sender : n.sender,
								date : n.date,
								mailid : n.mailid,
								read_status : n.read == 1 ? 'read' : 'unread'
							};
							html += D.T.selector('#message-template', data);
						});

						var boxname = get ? '发信箱' : '收信箱';
						var unreadcount = get ? '' : '(' + json.data.unread + '条未读信息)';
						$('#message-list-name').html(boxname);
						$('#unread-msg-count').html(unreadcount);

						$('#page-info').html('第' + json.data.page + '页,共' + json.data.maxpage + '页');
						$('#total-msg-count').html('共' + json.data.total + '条信息');
						$('#message-list').html(html);
						$('.message-container').find('.message-loading-overlay').remove();
					});
				},
				read : function(obj, type){
					var message_list = obj.closest('.message-list');
					var mailid = obj.attr('mailid');
					var message = obj.closest('.message-item');

					if( type && message.hasClass('message-inline-open') ) {
						message.removeClass('message-inline-open').find('.message-content').remove();
						return;
					}

					if( type ){
						$('.message-container').append('<div class="message-loading-overlay"><i class="icon-spin icon-spinner orange2 bigger-160"></i></div>');
					}else{
						$('.message-container').append('<div class="message-loading-overlay"><i class="icon-spin icon-spinner orange2 bigger-160"></i></div>');
						$('.message-inline-open').removeClass('message-inline-open').find('.message-content').remove();
					}
					
					D.ajax.get('?action=message&operation=index&act=read_msg&mailid=' + mailid, function(json){
						$('.message-item[mailid="'+mailid+'"]').removeClass('message-unread').addClass('message-read');
						var data = {
							sender_name : json.data.sender.name,
							sender_avatar : json.data.sender.avatar,
							sender_url : '?action=account&operation=profile&profile=yes&heivrid=' + json.data.sender.heivrid,
							message_title : json.data.mail.title,
							message_detail : json.data.mail.detail,
							date : json.data.mail.date
						};
						$('.message-date').html(json.data.mail.date);
						var html = D.T.selector('#message-content-template', data);
						$('#id-message-content').html(html);
	
						if( type ){
							$('.message-container').find('.message-loading-overlay').remove();
							message
								.addClass('message-inline-open')
								.append('<div class="message-content" />')
							var content = message.find('.message-content:last').html( $('#id-message-content').html() );
				
							content.find('.message-body').slimScroll({
								height: 200,
								railVisible:true
							});
						}else{
							//hide everything that is after .message-list (which is either .message-content or .message-form)
							message_list.next().addClass('hide');
							$('.message-container').find('.message-loading-overlay').remove();
	
							//close and remove the inline opened message if any!
				
							//hide all navbars
							$('.message-navbar').addClass('hide');
							//now show the navbar for single message item
							$('#id-message-item-navbar').removeClass('hide');
				
							//hide all footers
							$('.message-footer').addClass('hide');
							//now show the alternative footer
							$('.message-footer-style2').removeClass('hide');

							//move .message-content next to .message-list and hide .message-list
							message_list.addClass('hide').after($('.message-content')).next().removeClass('hide');
				
							//add scrollbars to .message-body
							$('.message-content .message-body').slimScroll({
								height: 200,
								railVisible:true
							});
						}
					});
				}
			}
		</script>
<style>
.select2-container.col-xs-12{ padding:none !important;}
</style>
</body>
</html>